<template>
  <div class="right-sidebar">
    <!-- 右侧栏根据需求暂不显示内容（移除实时统计与游戏技巧） -->
  </div>
</template>

<script setup>
import { computed } from 'vue'

// 定义 props
const props = defineProps({
  players: {
    type: Array,
    required: true,
    default: () => []
  }
})

// 计算总面积
const totalArea = computed(() => {
  return props.players.reduce((sum, player) => sum + (player.area || 0), 0)
})

// 计算每个玩家的面积占比
const playersWithAreaStats = computed(() => {
  if (totalArea.value === 0) {
    return props.players.map(player => ({
      ...player,
      area: player.area || 0,
      areaPercentage: 0
    }))
  }
  
  return props.players.map(player => {
    const area = player.area || 0
    const areaPercentage = Math.round((area / totalArea.value) * 100 * 10) / 10 // 保留一位小数
    return {
      ...player,
      area,
      areaPercentage
    }
  }).sort((a, b) => b.areaPercentage - a.areaPercentage) // 按占比排序
})

// 排行：根据面积/占比实时排序
const sortedPlayers = computed(() => {
  return [...props.players]
    .map(p => ({
      ...p,
      area: p.area || 0
    }))
    .sort((a, b) => b.area - a.area)
})
</script>

<style scoped>
.right-sidebar { 
  width: 300px; 
  background-color: white; 
  padding: 20px; 
  display: flex; 
  flex-direction: column; 
  gap: 20px; 
  border-left: 1px solid #e5e7eb; 
}

.stats-section h3, .tips-section h3 { 
  margin: 0 0 15px 0; 
  font-size: 18px; 
  display: flex; 
  align-items: center; 
  gap: 8px; 
  color: #374151; 
}

.icon { 
  font-size: 20px; 
}

.area-stats h4 { 
  margin: 0 0 15px 0; 
  color: #6B7280; 
  font-size: 14px; 
}

.stats-bars { 
  display: flex; 
  flex-direction: column; 
  gap: 12px; 
}

.stat-bar { 
  display: flex; 
  align-items: center; 
  gap: 8px; 
  padding: 8px 0;
}

.player-info {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 80px;
}

.player-color {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid #e5e7eb;
}

.player-name {
  font-size: 12px;
  color: #374151;
  font-weight: 500;
}

.bar-container { 
  flex: 1; 
  height: 16px; 
  background-color: #F3F4F6; 
  border-radius: 8px; 
  overflow: hidden; 
}

.bar-fill { 
  height: 100%; 
  border-radius: 8px; 
  transition: width 0.3s ease; 
}

.bar-stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 60px;
  gap: 2px;
}

.area-value {
  font-size: 11px;
  color: #6B7280;
  font-weight: 400;
}

.percentage {
  font-size: 12px;
  font-weight: 600;
  color: #374151;
}

.total-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
  padding: 10px 12px;
  background-color: #F9FAFB;
  border-radius: 6px;
  border: 1px solid #E5E7EB;
}

.total-label {
  font-size: 14px;
  color: #6B7280;
  font-weight: 500;
}

.total-value {
  font-size: 14px;
  color: #374151;
  font-weight: 600;
}

/* Leaderboard styles */
.leaderboard-section h3 {
  margin-top: 8px;
}
.leaderboard-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.leaderboard-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
}
.rank-badge {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #3B82F6;
  color: white;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
.avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-color: #E5E7EB;
}
.info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.row.minor {
  color: #6B7280;
  font-size: 12px;
}
.name {
  font-weight: 600;
  color: #111827;
}
.chip {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 10px;
  border: 1px solid #E5E7EB;
}
.chip.host { background: #FDE68A; border-color: #F59E0B; }
.chip.ready { background: #DCFCE7; border-color: #22C55E; }
.color-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid #E5E7EB;
}
.sep { margin: 0 4px; }

.tips-list { 
  list-style: none; 
  padding: 0; 
  margin: 0; 
  display: flex; 
  flex-direction: column; 
  gap: 8px; 
}

.tips-list li { 
  padding: 8px 12px; 
  background-color: #F9FAFB; 
  border-radius: 6px; 
  font-size: 14px; 
  color: #374151; 
  border-left: 3px solid #3B82F6; 
}

@media (max-width: 1200px) { 
  .right-sidebar { 
    width: 250px; 
  } 
  
  .player-info {
    min-width: 70px;
  }
  
  .player-name {
    font-size: 11px;
  }
  
  .bar-stats {
    min-width: 50px;
  }
  
  .area-value {
    font-size: 10px;
  }
  
  .percentage {
    font-size: 11px;
  }
}
</style>